<template>
	<div class="navbar justify-content-end" style="padding-right: 100px;">
		<div v-if="username == null || username == ''">
			<a class="text-primary" href="/Login"><span class="text-white">请点此登录</span></a>
		</div>
		<div v-else>
			<span class="text-white" style="margin-right: 50px;">欢迎{{username}}</span>
			<button @click="logout()" type="button" class="btn btn-danger">退出登录</button>
		</div>
		
	</div>
</template>

<script>
	import {
		computed,
		reactive,
		toRefs,
		onMounted
	} from "vue";
	import {
		useRouter
	} from "vue-router";
	import {
		useStore,
	} from "vuex";
	import axios from "axios";

	export default {
		props: {
			//入口参数
		},
		components: {
			//引入组件
		},
		setup() {
			//实例化userouter
			const router = useRouter();
			const store = useStore();
			store.state.ifFrameShow = true;
			//onMounted()生命周期
			onMounted(() => {
			});
			const data = reactive({
				username: localStorage.getItem("username"),
				logout: () => {
					localStorage.removeItem("STORAGE_TOKEN");
					localStorage.removeItem("username")
					localStorage.removeItem("userid")
					axios
						.post("logout")
						.then((response) => {
							
						})
						.catch((error) => console.log(error)); // 请求失败处理
					router.push({
						name: 'Login'
					})
				}
			});
			return {
				...toRefs(data),
			};
		},
	};
</script>


<style>
	.navbar {
		background: #0d6efd;
	}
</style>
